<!--
 * @Description:
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2025-07-29 09:44:19
 * @LastEditors: Seven
 * @LastEditTime: 2025-07-30 10:53:14
-->
<template>
  <base-chart :options="chartOptions" :theme="theme" />
</template>

<script>
import * as echarts from "echarts";
import BaseChart from "@/components/BaseChart/index.vue";

export default {
  name: "BarChart",
  components: { BaseChart },
  props: {
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
    title: {
      type: String,
      default: "数据统计",
    },
    theme: {
      type: String,
      default: "default",
    },
  },
  computed: {
    chartOptions() {
      return {
        title: {
          text: this.title + "数据统计",
          left: "center",
          textStyle: {
            color: "#ccc",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.data.map((item) => item.name),
          axisLabel: {
            interval: 0,
            rotate: 30,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "统计",
            type: "bar",
            data: this.data.map((item) => item.value),
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
          },
        ],
      };
    },
  },
};
</script>
